<template>
  <scroll-view class="flex-col page" scroll-y :scroll-top="scrollTop" scroll-with-animation>
    <view class="doctor-info">
      <image class="doctor-avatar" src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/eye_teacher1.png" />
      <text class="doctor-name">{{chatTitle}}</text>
      <view class="ai-auth">
        <text class="auth-text">{{chatSubTitle}}</text>
        <view class="auth-dot"></view>
      </view>
      <view class="rating">
        <text class="star">★</text>
        <text class="score">4.9</text>
        <text class="rate-count">(170 rates)</text>
      </view>
    </view>
    <view class="intro-text">
      <view v-for="(msg, index) in messageList" :key="index" 
            :class="['chat-item', msg.type === 'user' ? 'user-message' : 'ai-message']">
        <image v-if="msg.type === 'ai'" class="avatar" 
                src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/doctor_body.png" />
        <view class="message-bubble">
          <rich-text :nodes="msg.content"></rich-text>
          <!-- <v-md-editor v-model="msg.content"></v-md-editor> -->
        </view>
        <!-- <image v-if="msg.type === 'user'" class="avatar" 
                src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/basicprofile.png" /> -->
      </view>
      <view v-if="waitResponse === true && aiResponse == ''" class="chat-item ai-message">
        <image class="avatar" 
          src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/doctor_body.png" />
        <view class="message-bubble typing-bubble">
          <view class="typing-dots">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>
      <view v-if="aiResponse != ''" class="chat-item ai-message">
        <image class="avatar" 
                src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/doctor_body.png" />
        <view v-if="waitResponse === false" class="message-bubble">
          <!-- <v-md-editor v-model="aiResponse"></v-md-editor> -->
          <rich-text :nodes="aiResponse"></rich-text>
        </view>
        <view v-else class="message-bubble typing-bubble">
          <view class="typing-dots">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>
      
    </view>
    <view class="bottom-spacing"></view>

    <view v-if="inputShow" class="bottom-bar safe-area-bottom">
      <input class="input-box" v-model="inputMessage" 
        :maxlength="-1"
        placeholder="有什么想知道的，快来问问我" 
        :auto-height="true"
        :show-confirm-bar="false"
        adjust-position="false"></input>
      <button class="send-btn" @click="uploadReport()">
        <img class="send-btn-image" src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/add.png">
      </button>
      <button class="send-btn" @click="sendMessage(inputMessage)">
        <img class="send-btn-image" src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/send.png">
      </button>
    </view>
  </scroll-view>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  data() {
    return {
      waitResponse: false,
      scrollTop: 0,
      inputMessage: '',
      userId: 'user123',
      messageList: [],
      aiResponse: '',
      aiResponseEncode: '%0A%23%20%E8%A7%86%E5%8A%9F%E8%83%BD%E6%A3%80%E6%9F%A5%E6%8A%A5%E5%91%8A%E8%A7%A3%E8%AF%BB%E4%B8%8E%E5%BB%BA%E8%AE%AE%0A%0A%23%23%20%E6%A0%B8%E5%BF%83%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%0A%0A%23%23%23%20%E8%B0%83%E8%8A%82%E5%8A%9F%E8%83%BD%E5%BC%82%E5%B8%B8%0A-%20**NRA%E2%89%A5%2B2.50D**%EF%BC%9A%E8%B0%83%E8%8A%82%E6%94%BE%E6%9D%BE%E8%83%BD%E5%8A%9B%E6%98%BE%E8%91%97%E4%B8%8B%E9%99%8D%0A%20%20-%20%E6%8F%90%E7%A4%BA%E5%8F%AF%E8%83%BD%E5%AD%98%E5%9C%A8%E8%B0%83%E8%8A%82%E7%97%89%E6%8C%9B%2F%E8%BF%87%E5%BA%A6%0A%20%20-%20%E9%9C%80%E6%8E%92%E6%9F%A5%E8%BF%87%E5%BA%A6%E7%94%A8%E7%9C%BC%E3%80%81%E6%9C%AA%E7%9F%AB%E6%AD%A3%E8%BF%9C%E8%A7%86%E7%AD%89%E6%83%85%E5%86%B5%0A-%20**PRA%E2%89%A4-4.00D**%EF%BC%9A%E8%B0%83%E8%8A%82%E7%B2%BE%E5%87%86%E5%BA%A6%E4%B8%A5%E9%87%8D%E4%B8%8D%E8%B6%B3%0A%20%20-%20%E6%98%93%E5%BC%95%E5%8F%91%E8%A7%86%E7%96%B2%E5%8A%B3%E5%92%8C%E8%BF%91%E8%A7%86%E8%BF%9B%E5%B1%95%0A-%20**%E5%8D%95%E7%9C%BC%E8%B0%83%E8%8A%82%E8%83%BD%E5%8A%9B%E5%BC%82%E5%B8%B8**%EF%BC%88%E7%89%B9%E5%88%AB%E6%98%AF%E5%B7%A6%E7%9C%BC%EF%BC%89%EF%BC%9A%0A%20%20-%20%E6%AD%A3%E9%95%9C%E6%8E%A5%E5%8F%97%E8%83%BD%E5%8A%9B%E5%B7%A6%E7%9C%BC%E4%BB%85%2B1.00D~%2B2.00D%0A%20%20-%20%E8%B4%9F%E9%95%9C%E6%8E%A5%E5%8F%97%E8%83%BD%E5%8A%9B%E5%8F%8C%E7%9C%BC%E6%B3%AA-6.00D%0A%20%20-%20%E6%8F%90%E7%A4%BA%E8%B0%83%E8%8A%82%E5%82%A8%E5%A4%87%E4%B8%A5%E9%87%8D%E4%B8%8D%E8%B6%B3%0A%0A%23%23%23%20%E9%9B%86%E5%90%88%E5%8A%9F%E8%83%BD%E5%BC%82%E5%B8%B8%0A-%20**AC%2FA%202%E2%96%B3%2FD**%EF%BC%88%E4%BD%8E%E4%BA%8E%E6%AD%A3%E5%B8%B83-5%E2%96%B3%2FD%EF%BC%89%0A-%20**%E8%81%9A%E6%95%A3%E7%81%B5%E6%95%8F%E5%BA%A60.5cpm%2Fmin**%EF%BC%88%E8%BF%9C%E4%BD%8E%E4%BA%8E15%C2%B13cpm%EF%BC%89%0A-%20%E6%8F%90%E7%A4%BA%E9%9B%86%E5%90%88%E7%B3%BB%E7%BB%9F%E4%BB%A3%E5%81%BF%E8%83%BD%E5%8A%9B%E4%B8%8D%E8%B6%B3%0A%0A%23%23%20%E6%B2%BB%E7%96%97%E6%96%B9%E6%A1%88%E5%BB%BA%E8%AE%AE%0A%0A%23%23%23%20%E8%A7%86%E8%A7%89%E8%AE%AD%E7%BB%83%E6%96%B9%E6%A1%88%0A%7C%20%E8%AE%AD%E7%BB%83%E7%B1%BB%E5%9E%8B%20%7C%20%E5%AE%9E%E6%96%BD%E6%96%B9%E5%BC%8F%20%7C%20%E9%A2%91%E7%8E%87%E8%A6%81%E6%B1%82%20%7C%0A%7C%3A---%3A%7C%3A---%3A%7C%3A---%3A%7C%0A%7C%20%E8%B0%83%E8%8A%82%E8%AE%AD%E7%BB%83%20%7C%20%E5%8F%8D%E8%BD%AC%E6%8B%8D%E8%AE%AD%E7%BB%83%EF%BC%88%C2%B12.00D%E5%BC%80%E5%A7%8B%EF%BC%89%20%7C%20%E6%AF%8F%E6%97%A52%E6%AC%A1%C3%9715%E5%88%86%E9%92%9F%20%7C%0A%7C%20%E9%9B%86%E5%90%88%E8%AE%AD%E7%BB%83%20%7C%20%E6%A3%B1%E9%95%9C%E6%A3%92%2F%E6%95%91%E7%94%9F%E5%9C%88%E5%8D%A1%E8%AE%AD%E7%BB%83%20%7C%20%E9%9A%94%E6%97%A51%E6%AC%A1%C3%9720%E5%88%86%E9%92%9F%20%7C%0A%7C%20%E8%9E%8D%E5%83%8F%E8%AE%AD%E7%BB%83%20%7C%20%E5%81%8F%E6%8C%AF%E7%AB%8B%E4%BD%93%E5%9B%BE%E8%AE%AD%E7%BB%83%20%7C%20%E6%AF%8F%E5%91%A83%E6%AC%A1%C3%9730%E5%88%86%E9%92%9F%20%7C%0A%0A%23%23%23%20%E5%85%89%E5%AD%A6%E7%9F%AB%E6%AD%A3%E6%96%B9%E6%A1%88%0A-%20**%E5%B1%88%E5%85%89%E7%9F%AB%E6%AD%A3%E4%BC%98%E5%85%88**%EF%BC%9A%E5%BB%BA%E8%AE%AE%E5%85%A8%E7%9F%AB%E9%85%8D%E9%95%9C%EF%BC%88%E7%89%B9%E5%88%AB%E6%B3%A8%E6%84%8F%E5%B7%A6%E7%9C%BC%E8%B0%83%E8%8A%82%E4%B8%8D%E8%B6%B3%EF%BC%89%0A-%20**%E4%B8%B4%E6%97%B6%E6%80%A7%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88**%EF%BC%9A%0A%20%20-%20%E9%9D%92%E5%B0%91%E5%B9%B4%E5%8F%AF%E8%80%83%E8%99%91%E6%B8%90%E8%BF%9B%E5%A4%9A%E7%84%A6%E7%82%B9%E9%95%9C%E7%89%87%0A%20%20-%20%E6%88%90%E4%BA%BA%E5%BB%BA%E8%AE%AE%E6%8A%97%E7%96%B2%E5%8A%B3%E9%95%9C%E7%89%87%0A%0A%23%23%20%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9%E4%B8%8E%E9%9A%8F%E8%AE%BF%0A1.%20**%E7%94%A8%E7%9C%BC%E4%B9%A0%E6%83%AF%E7%AE%A1%E7%90%86**%0A%20%20%20-%20%E4%B8%A5%E6%A0%BC%E6%89%A7%E8%A1%8C20-20-20%E6%B3%95%E5%88%99%0A%20%20%20-%20%E9%98%85%E8%AF%BB%E8%B7%9D%E7%A6%BB%E4%BF%9D%E6%8C%8133cm%E4%BB%A5%E4%B8%8A%0A2.%20**%E9%9A%8F%E8%AE%BF%E7%9B%91%E6%B5%8B**%0A%20%20%20-%20%E6%AF%8F3%E4%B8%AA%E6%9C%88%E5%A4%8D%E6%9F%A5%E8%B0%83%E8%8A%82%E5%8A%9F%E8%83%BD%E6%8C%87%E6%A0%87%0A%20%20%20-%20%E6%AF%8F6%E4%B8%AA%E6%9C%88%E8%BF%9B%E8%A1%8C%E5%B1%88%E5%85%89%E7%8A%B6%E6%80%81%E6%A3%80%E6%9F%A5%0A3.%20**%E5%BC%82%E5%B8%B8%E9%A2%84%E8%AD%A6%E4%BF%A1%E5%8F%B7**%0A%20%20%20-%20%E6%8C%81%E7%BB%AD%E7%9C%BC%E8%83%80%E5%A4%B4%E7%97%9B%0A%20%20%20-%20%E9%98%85%E8%AF%BB%E6%95%88%E7%8E%87%E4%B8%8B%E9%99%8D%0A%20%20%20-%20%E8%BF%91%E8%A7%86%E5%BA%A6%E6%95%B0%E5%B9%B4%E5%A2%9E%E9%95%BF%E2%89%A50.75D%0A%0A%3E%20%E7%89%B9%E5%88%AB%E6%8F%90%E9%86%92%EF%BC%9A%E5%BB%BA%E8%AE%AE%E7%BB%93%E5%90%88%E8%A7%92%E8%86%9C%E5%9C%B0%E5%BD%A2%E5%9B%BE%E5%92%8C%E7%9C%BC%E8%BD%B4%E9%95%BF%E5%BA%A6%E7%9B%91%E6%B5%8B%EF%BC%8C%E6%8E%92%E9%99%A4%E5%99%A8%E8%B4%A8%E6%80%A7%E7%97%85%E5%8F%98%E5%8F%AF%E8%83%BD%E3%80%82%E5%A6%82%E8%AE%AD%E7%BB%83%E5%90%8E%E6%8C%87%E6%A0%87%E6%97%A0%E6%98%8E%E6%98%BE%E6%94%B9%E5%96%84%EF%BC%8C%E9%9C%80%E8%80%83%E8%99%91%E8%BF%9B%E8%A1%8C%E6%9B%B4%E8%AF%A6%E7%BB%86%E7%9A%84%E7%A5%9E%E7%BB%8F%E8%B0%83%E8%8A%82%E5%8A%9F%E8%83%BD%E8%AF%84%E4%BC%B0%E3%80%82',
      streamResponse: '', // 添加流式响应临时存储
      inputShow: true,
      reportUrl: '',
      md: null,
	  chatTitle: '',
	  chatSubTitle: '',
    };
  },
  created() {
    this.md = new MarkdownIt({
      html: true,
      breaks: true,
      linkify: true,
      typographer: true
    });
  },
  onLoad(options) {
    // 页面加载时的初始化操作
    if (options.question) {
      // 如果是报告的话，就保存链接
      this.inputMessage = decodeURIComponent(options.question);
      if (options.report) {
        this.sendMessage('报告已发送，请耐心等待~');
      } else {
        this.sendMessage(this.inputMessage)
      }
    }
	let that = this
	this.$http.GET('/admin/student/student/getWechatConfig', {}, function (res) {
		that.aiResponse = res.data.chatOpen
		that.chatTitle = res.data.chatTitle
		that.chatSubTitle = res.data.chatSubTitle
	}, function (res) {})
    // this.aiResponse = decodeURIComponent(this.aiResponseEncode);
    // console.log('onload decodeURIComponent', decodeURIComponent(this.aiResponseEncode))
    // this.aiResponse = this.parseMarkdownMd(decodeURIComponent(this.aiResponseEncode));
    console.log('onload', this.aiResponse)
  },
  methods: {
    // 添加消息到列表
    addMessage(content, type) {
      this.messageList.push({
        content,
        type
      });
      this.$nextTick(() => {
        // 滚动到底部
        const query = uni.createSelectorQuery().in(this);
        query.select('.chat-container').boundingClientRect();
        query.select('.chat-list').boundingClientRect();
        query.exec(res => {
          if (res[0] && res[1]) {
            this.scrollTop = res[1].height - res[0].height;
          }
        });
      });
    },
    // 发送消息
    sendMessage(content) {
      let that = this;
      if (!this.inputMessage.trim()) {
        uni.showToast({
          title: '请输入问题内容',
          icon: 'none'
        });
        return;
      }
      // 重置流式响应内容
      this.aiResponse = '';
      this.streamResponse = '';
      const tempInput = this.inputMessage;
      this.inputMessage = '';
      this.addMessage(content, 'user');
      that.$set(this, 'waitResponse', true);
      console.log('sendMessage waitResponse', that.waitResponse)
      // 显示加载提示
      // uni.showLoading({
      //   title: '正在思考中...',
      //   mask: true
      // });
      this.inputShow = false;
      // 创建请求任务以便获取响应头和处理分块数据
      const requestTask = uni.request({
        url: 'https://api.coze.cn/v3/chat',
        method: 'POST',
        header: {
          'X-Source': 'openapi',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer pat_vRVuHY8VXvLinq84S1Ls0RpDzHkBAsa3xGx61RuaqACICl9Lo210arsmxAQWiWs1'
        },
        data: {
          bot_id: '7477483514267713576',
          user_id: this.userId,
          stream: true,
          auto_save_history: true,
          additional_messages: [
            {
              role: 'user',
              content: tempInput,
              content_type: 'text'
            }
          ]
        },
        enableChunked: true, // 启用分块传输
        success: (response) => {
          // 处理完整响应
          uni.hideLoading();
          // 添加 AI 回复消息
          this.aiResponse = this.parseMarkdownMd(this.aiResponse);
          if (that.aiResponse != '') {
            this.addMessage(that.aiResponse, 'ai');
          }
          that.aiResponse = '';
          console.log('ai messageList', that.messageList);
          this.inputShow = true;
        },
        fail: (error) => {
          uni.hideLoading();
          console.error('发送失败：', error);
          uni.showToast({
            title: '发送失败，请重试',
            icon: 'none'
          });
          this.inputShow = true;
        }
      });

      // 监听数据块
      requestTask.onChunkReceived((response) => {
        try {
          // const chunk = new TextDecoder().decode(response.data);
          // const chunk = String.fromCharCode.apply(null, new Uint8Array(response.data));
          const chunk = Buffer.from(response.data).toString('utf-8');
          const events = chunk.split('\n\n');
          
          events.forEach(event => {
            if (!event.trim()) return;
            // 使用 Vue 的响应式方法更新状态
            const [eventType, data] = event.split('\n');
            if (eventType.startsWith('event:') && data.startsWith('data:')) {
              const eventName = eventType.slice(6);
              const jsonData = JSON.parse(data.slice(5));

              if (eventName === 'conversation.message.delta') {
                // 累加流式响应内容
                this.streamResponse += jsonData.content;
                if (that.waitResponse === true && this.streamResponse.trim()) {
                  that.$set(this, 'waitResponse', false);
                }
                this.aiResponse = this.streamResponse;
                this.aiResponse = this.parseMarkdownMd(this.aiResponse);
                console.log('this.streamResponse', this.streamResponse);
                this.$nextTick(() => {
                  const query = uni.createSelectorQuery().in(this);
                  query.select('.intro-text').boundingClientRect(rect => {
                    if (rect) {
                      this.scrollTop = rect.height;
                      console.log('scrollTop', this.scrollTop)
                    }
                  }).exec();
                });
              } else if (eventName === 'conversation.chat.completed') {
                // 对话完成
                uni.hideLoading();
              }
            }
          });
        } catch (error) {
          console.error('处理数据块错误：', error);
        }
      });
    },
    uploadReport(){
      let that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          const tempFilePaths = res.tempFilePaths
          that.$tools.uploadFile(tempFilePaths, function(res){
            console.log(res)
            that.reportUrl = 'https://joystudenttask.oss-cn-beijing.aliyuncs.com/' + res
            that.inputMessage = that.reportUrl
            that.sendMessage('报告已发送，请耐心等待~')
          })
        }
      })
    },
    // 替换原有的 parseMarkdown 方法
    parseMarkdownMd(text) {
      if (!text) return '';
      
      try {
        // 使用 markdown-it 转换
        let html = this.md.render(text);
        
        // 添加自定义样式类
        html = html
          .replace(/<table>/g, '<table class="md-table">')
          .replace(/<blockquote>/g, '<blockquote class="md-blockquote">')
          .replace(/<ul>/g, '<ul class="md-list">')
          .replace(/<ol>/g, '<ol class="md-list">')
          .replace(/<h1>/g, '<h1 class="md-h1">')
          .replace(/<h2>/g, '<h2 class="md-h2">')
          .replace(/<h3>/g, '<h3 class="md-h3">')
          .replace(/<h4>/g, '<h4 class="md-h4">');
        
        return `<div class="report-container">${html}</div>`;
      } catch (error) {
        console.error('Markdown 解析错误:', error);
        return text;
      }
    }
  }
};
</script>

<style lang="css">
/* .response_ul {
  margin-left: 0px;
}
.response_ul li {
  margin-left: 0px;
} */
/* 添加新的样式 */
.md-blockquote {
  border-left: 4px solid #43cf7c;
  padding: 10px 20px;
  margin: 16px 0;
  background-color: #f5f5f5;
  color: #666;
}

.md-list {
  font-size: 14px;
  padding-left: 0px;
  margin-left: 20px;
}

.md-list li {
  font-size: 14px;
  margin-left: 0px;
  padding-left: 0px;
}
.report-table {
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}
.report-table th, .report-table td {
  font-size: 14px;
  padding: 0px;
  border: 1px solid #ddd;
  text-align: left;
}
.report-table th {
  background-color: #f8f9fa;
}
/* Markdown 样式 */
.md-paragraph {
  margin: 16px 0;
  line-height: 1.6;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.md-table td {
  font-size: 14px;
  border: 1px solid #333;
  padding: 4px;
  text-align: left;
  word-wrap: break-word;
  font-size: 14px;
}

.md-table tr:first-child td {
  background-color: #f5f5f5;
  font-weight: bold;
}

.md-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.md-h1 {
  font-size: 14px;
  font-weight: bold;
  margin: 4px 0;
  color: #333;
  line-height: 1.4;
  text-align: center;
}

.md-h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 4px 0;
  color: #333;
  line-height: 1.4;
}

.md-h3 {
  font-size: 14px;
  margin: 0px;
  color: #333;
  line-height: 1.4;
}

.md-bold {
  font-weight: bold;
}

.md-italic {
  font-style: italic;
}

.page {
  background-color: #ffffff;
  height: 100vh;
  width: 100%;
}

.scroll-area {
  flex: 1;
  padding: 20px;
  padding-bottom: 0;
}

.bottom-spacing {
  height: 80px; /* 与 bottom-bar 高度保持一致 */
}

.input-box {
  flex: 1;
  background-color: #f0f0f0;
  padding: 5px 20px;
  border-radius: 20px;
  margin-right: 10px;
  color: #666;
  min-height: 40px;
  max-height: 120px;
  width: auto;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end; /* 改为底部对齐 */
  padding: 5px 20px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.2以下 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}

.chat-container {
  flex: 1;
  height: calc(100vh - 280px); /* 减去顶部信息和底部输入框的高度 */
  padding: 20px;
  margin-bottom: 70px;
}

.chat-list {
  display: flex;
  flex-direction: column;
}

.chat-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 0 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  flex-shrink: 0;
}

.message-bubble {
  max-width: 85%;
  padding: 5px 5px;
  border-radius: 12px;
  margin: 0px;
  word-break: break-all;
}

.ai-message {
  flex-direction: row;
}

.user-message {
  flex-direction: row-reverse;
}

.ai-message .message-bubble {
  background-color: #f0f0f0;
  color: #333;
  border-top-left-radius: 4px;
}

.user-message .message-bubble {
  background-color: #43cf7c;
  color: #fff;
  border-top-right-radius: 4px;
}

.doctor-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.doctor-avatar {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  margin-bottom: 15px;
}

.doctor-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.ai-auth {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.auth-text {
  color: #43cf7c;
  font-size: 14px;
  margin-right: 5px;
}

.auth-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #27ae60;
}

.rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.star {
  color: #43cf7c;
  font-size: 18px;
}

.score {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.rate-count {
  color: #666;
  font-size: 14px;
}

.intro-text {
  background-color: #f8f9fa;
  border-radius: 15px;
  padding: 20px 0px;
  margin-bottom: 80px;
  margin: 20px 0;
  line-height: 1.6;
  color: #333;
  font-size: 14px;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 5px 20px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}


.send-btn {
  padding: 0 20px;
  height: 40px;
  background-color: #43cf7c;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  border: none;
  min-width: 40px;
  margin-right: 5px;
}
.send-btn-image {
  width: 20px;
  height: 20px;
}

.send-btn::after {
  border: none;
}

/* 添加打字动画相关样式 */
.typing-bubble {
  min-width: 60px;
  padding: 12px !important;
}

.typing-dots {
  display: flex;
  gap: 4px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #999;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
</style>